<template>
    <!-- 手机号验证码组件 -->
    <div class="text-center">
      <q-field v-if="isOriginMobile"
          :count="11"
          :error="orgmobileError"
          error-label="手机号不合法"
          class="full-width"
        ><q-input v-model="orgmobile" type="tel" max-length="11" clearable float-label="原手机号" @blur="checkMobile(orgmobile,true)"/>
      </q-field>

      <q-field
          :count="11"
          :error="mobileError"
          error-label="手机号不合法"
          class="full-width"
        ><q-input v-model="mobile" type="tel" max-length="11" clearable float-label="手机号" @blur="checkMobile(mobile)"/>
      </q-field>

      <q-field
          :count="6"
          :error="captchaError"
          error-label="验证码长度为6位"
          class="full-width"
        >
        <br>
        <q-btn style='display: table;' color="blue-grey-6"  small :disabled="isAllowSend" @click='captchaSendCountDown'>
          {{captchaTip}}{{countdownSeconds ? countdownSeconds+'(s)':''}}</q-btn>
        <q-input  v-model="captcha" float-label="验证码" max-length="6"/>
      </q-field>
      <q-btn
        color="primary"
        push
        @click="confirm"
        class="full-width"
        icon="group"
        loader
      > 提交 </q-btn>
    </div>
</template>

<script>
import { QBtn, QInput, QIcon, QField } from "quasar";
import customerApi from '../../https/customerApi';

export default {
  components: {
    QBtn,
    QInput,
    QIcon,
    QField
  },
  data() {
    return {
      captchaTip: "获取验证码",
      countdownSeconds: null,
      orgmobileError: false,
      mobileError: false,
      captchaError: false,
      orgmobile: "",
      mobile: "",
      captcha: "",
      isAllowSend: false, //是否禁止发送
    };
  },
  props: { isOriginMobile: {type:Boolean ,default:false}},
  methods: {
    resetCheck() {
      this.mobileError = false;
      this.captchaError = false;
    },
    confirm(e,done) {
      this.resetCheck();
      if (this.isOriginMobile && this.isOriginMobile == true) {
         if (!this.checkMobile(this.orgmobile,true)) {
           done();
           return false;
         }
      }
      if (this.checkMobile(this.mobile) && this.checkCaptcha()) {
        const phoneinfo = {
          orgmobile: this.orgmobile,
          mobile: this.mobile,
          captcha: this.captcha
        };
        this.$emit("callback-phoneinfo", phoneinfo);
        console.log("校验回调：", phoneinfo);
      }
      done();
    },
    //校验手机号验证码
    checkCaptcha() {
      const _captcha = this.captcha;
      if (_captcha == null || _captcha.length != 6) {
        this.captchaError = true;
        return false;
      } else {
        this.captchaError = false;
        return true;
      }
    },
    checkMobile(_mobile, isOrg) {
      // const _mobile = this.mobile;
      if (
        _mobile == null ||
        _mobile.length != 11 ||
        !/^(13|14|15|17)[0-9]{9}$/.test(_mobile)
      ) {
        isOrg ? (this.orgmobileError = true) : (this.mobileError = true);
        return false;
      } else {
        isOrg ? (this.orgmobileError = false) : (this.mobileError = false);
        return true;
      }
    },
    captchaSendCountDown() {
      if (!this.isAllowSend && this.checkMobile(this.mobile)) {
        console.log("点击发送验证码");
        this.isAllowSend = true;
        this.captchaTip = "稍等";
        this.countdownSeconds = 60;
        customerApi.sendCaptchaMobile({mobile:this.mobile}).then(res=>{
          console.log('验证码发送成功');
        }).catch(err=>{})
        var _wait = setInterval(() => {
          this.countdownSeconds--;
          if (this.countdownSeconds <= 0) {
            this.countdownSeconds = null;
            this.captchaTip = "获取验证码";
            this.isAllowSend = false;
            clearInterval(_wait);
          }
        }, 1000);
      }
    }
  }
};
</script>
